import { Component, signal, ChangeDetectionStrategy, input, output } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatMenuModule } from '@angular/material/menu';
import { MatBadgeModule } from '@angular/material/badge';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatDividerModule } from '@angular/material/divider';

import screenfull from 'screenfull';
import { UserMenuComponent } from './user-menu.component';
import { BreadcrumbComponent } from '../breadcrumb/breadcrumb.component';
 
@Component({
  selector: 'cne-header',
  standalone: true,
  imports: [
    CommonModule,
    MatIconModule,
    MatButtonModule,
    MatToolbarModule,
    MatMenuModule,
    MatBadgeModule,
    MatTooltipModule,
    MatDividerModule,
    UserMenuComponent,
    BreadcrumbComponent
  ],
  templateUrl: './header.component.html',
  styleUrl: './header.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class HeaderComponent {
  // 输入属性
  sidebarCollapsed = input<boolean>(false);
  
  // 输出事件
  sidebarToggle = output<void>();
  
  // 用户信息
  userInfo = {
    name: 'User',
    avatar: 'assets/images/avatar.jpg',
    department: 'Department'
  };

  fullscreenEnabled = screenfull.isEnabled;
  
  // 通知数量
  notificationCount = signal(11);
  
  // 当前页面标题
  currentPageTitle = signal('工作台');
  
  // 切换侧边栏状态
  toggleSidebar(): void {
    this.sidebarToggle.emit();
  }

  toggleFullscreen() {
    if (screenfull.isEnabled) {
      screenfull.toggle();
    }
  }

  isFullscreen() {
    return screenfull.isFullscreen;
  }

  // 获取通知数量
  getNotificationCount(): number {
    return this.notificationCount();
  }
  
  // 获取当前页面标题
  getCurrentPageTitle(): string {
    return this.currentPageTitle();
  }
  
  // 获取用户姓名
  getUserName(): string {
    return this.userInfo.name;
  }
  
  // 获取用户部门
  getUserDepartment(): string {
    return this.userInfo.department;
  }
}